<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta
        http-equiv="x-ua-compatible"
        content="ie=edge"
    >
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >
    <title>RxDB Heroes Graphql</title>
</head>

<body id="app">
    <h1>
        RxDB Heroes Graphql
    </h1>

    <div
        id="info-box"
        class="box"
    >
        <h3>Database Info</h3>
        Storage: <span id="storage-key"></span><br />
        Database Name: <span id="database-name"></span>
    </div>
    <div
        id="list-box"
        class="box"
    >
        <div id="leader-icon">&#9819;</div>
        <h3>Heroes</h3>
        <ul id="heroes-list">Loading page..</ul>
    </div>
    <div
        id="insert-box"
        class="box"
    >
        <h3>Add Hero</h3>
        <input
            type="text"
            placeholder="Name"
            name="name"
        />
        <input
            type="text"
            placeholder="Color"
            name="color"
        />
        <button id="insert-button">Insert</button>
    </div>
</body>

</html>
